<!--
 * @Author: zhangwei 1405298045@qq.com
 * @Date: 2022-03-01 11:47:56
 * @LastEditTime: 2022-04-18 15:26:48
 * @LastEditors: zhangwei 1405298045@qq.com
 * @Description: 
 * @FilePath: /ll-fe-mp-dyfx/src/otherPage/MessageCenter.vue
 *  
-->
<template>
	<view class="MessageCenter">
		<view class="MessageCenter-header">
			<DistributionNavBar rgb="#fff">
				<template slot="left">
					<image :src="bankIcon" @click="clickBack" />
				</template>

				<view slot="center" class="MessageCenter-header-title">
					<text>消息中心</text>
					<!-- #ifdef MP-WEIXIN -->
					<template v-if="isShowButton">
						<image class="MessageCenter-header-read" :src="readIcon" @click.prevent.stop="changeMessageStatus" />
					</template>

					<!-- #endif -->
				</view>

				<!-- #ifndef MP-WEIXIN -->
				<template slot="right" v-if="isShowButton">
					<image class="MessageCenter-header-read" :src="readIcon" @click.prevent.stop="changeMessageStatus" />
				</template>
				<!-- #endif -->
			</DistributionNavBar>

			<view class="MessageCenter-header-main">
				<view class="MessageCenter-header-main-type">
					<view
						:key="typeItem.type"
						v-for="typeItem in functionTypeList"
						@click.stop="changeTypeActive(typeItem)"
						class="MessageCenter-header-main-type-item"
						:style="{
							backgroundImage: `url(${typeItem.type === typeActive ? typeItem.bgImageUrl : ''})`
						}"
					>
						<image :src="typeItem.iconUrl" />
						<text>{{ typeItem.label }}</text>
						<template>
							<MessageBadge class="MessageCenter-header-main-type-item-number" :text="allUnreadParams[typeItem.type] || 0" />
						</template>
					</view>
				</view>

				<view class="MessageCenter-header-main-filter">
					<button
						:key="filterItem.type"
						v-for="filterItem in filterTypeList"
						@click.stop="changeFilterActive(filterItem)"
						:class="{
							active: filterActive === filterItem.type,
							mark: filterItem.mark && allUnreadParams[typeActive]
						}"
					>
						{{ filterItem.label }}
					</button>
				</view>
			</view>
		</view>

		<view class="MessageCenter-content">
			<scroll-view
				scroll-y
				scroll-anchoring
				:show-scrollbar="false"
				:style="{
					height: `${contentHeight}px`
				}"
				@scrolltolower="scrolltolower"
				class="MessageCenter-content-scroll"
			>
				<MessageTemplate
					:type="typeActive"
					:isSkelett="isSkelett"
					:list="currentTypeList"
					:hintStatus="isHintStatus"
					@callBack="clickCallBack"
				/>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import config from '@/config';
import { defaultImageUrl } from '@/utils';
import { getDomeInfo } from '@/utils/common';
import { setAllMessageHaveread, getCurrentTypeMessage, getUnreadMessageNumber, setSingleMessageHaveread } from '@/api/other';

import MessageBadge from './components/MessageBadge';
import MessageTemplate from './components/MessageTemplate';
import DistributionNavBar from '@/components/distributionNavBar/indeHome';

const bankIcon = Object.freeze(`${defaultImageUrl}help/icon_navbar_back.png`);
const readIcon = Object.freeze(`${defaultImageUrl}icon/icon_information_delete.png`);

const functionTypeList = Object.freeze([
	{
		type: 'explore',
		label: '探店信息',
		iconUrl: require('@/static/icon/icon_information_shop.png'),
		bgImageUrl: require('@/static/images/message/img_information_shop.png')
	},
	{
		type: 'material',
		label: '素材信息',
		iconUrl: require('@/static/icon/icon_information_pic.png'),
		bgImageUrl: require('@/static/images/message/img_information_pic.png')
	},
	{
		type: 'income',
		label: '收益信息',
		iconUrl: require('@/static/icon/icon_information_money.png'),
		bgImageUrl: require('@/static/images/message/img_information_money.png')
	}
]);

const filterTypeList = Object.freeze([
	{
		type: 'all',
		label: '全部'
	},
	{
		mark: true,
		type: 'unread',
		label: '只看未读'
	}
]);

export default {
	name: 'MessageCenter',

	data() {
		return {
			readIcon,
			bankIcon,
			filterTypeList,
			functionTypeList,

			contentHeight: 0,
			filterActive: 'all',
			typeActive: 'explore',

			isSkelett: true,
			isHintStatus: '', // nomore  nodata

			allUnreadParams: {},
			currentTypeList: [],

			requestParams: {
				// searchKey: '',
				// sourceUserId: '',
				// sortType: true, // 数据翻页方式 true-向下翻页，false-向上翻页,默认 true
				pageIndex: 1,
				pageSize: 10,
				typeColumnName: 'type',
				terminalCode: config.TERMINAL_CODE
			}
		};
	},

	computed: {
		isShowButton() {
			const { allUnreadParams } = this;

			return Object.values(allUnreadParams).reduce((first, last) => first + last, 0);
		}
	},

	created() {
		this.getMessageList();
		this.getAllTypeUnreadNumber();
	},

	mounted() {
		getDomeInfo.call(this, '.MessageCenter-content', false).then(({ height }) => {
			this.contentHeight = height;
		});
	},

	methods: {
		getMessageList(pageIndex = this.requestParams.pageIndex) {
			const { typeActive, filterActive, requestParams } = this;

			const params = {
				...requestParams,

				pageIndex,
				typeList: typeActive,
				onlySeeUnRead: filterActive === 'unread'
			};

			return getCurrentTypeMessage(params).then((res) => {
				const { code, data } = res;

				if (code !== 200) {
					return;
				}

				const { records = [] } = data || {};

				const isPageIndex = pageIndex === 1;
				this.requestParams.pageIndex = pageIndex;
				this.currentTypeList = isPageIndex ? records : [...this.currentTypeList, ...records];
				this.isHintStatus = isPageIndex && !records.length ? 'nodata' : records.length < requestParams.pageSize ? 'nomore' : '';

				this.$nextTick((e) => {
					this.isSkelett = false;
				});
			});
		},

		changeTypeActive({ type }) {
			const { typeActive } = this;

			if (typeActive === type) {
				return;
			}

			this.typeActive = type;
			this.getMessageList(1);
		},

		changeFilterActive({ type }) {
			const { filterActive } = this;

			if (filterActive === type) {
				return;
			}

			this.filterActive = type;
			this.getMessageList(1);
		},

		changeMessageStatus() {
			const { requestParams, functionTypeList } = this;
			const params = {
				...requestParams,
				typeList: functionTypeList.map((item) => item.type)
			};

			setAllMessageHaveread(params).then((res) => {
				const { code, message } = res;

				if (code !== 200) {
					return;
				}

				uni.showToast({
					icon: 'none',
					title: message,
					success: () => {
						this.getMessageList(1);
						this.getAllTypeUnreadNumber();
					}
				});
			});
		},

		getAllTypeUnreadNumber() {
			const { requestParams, functionTypeList } = this;

			const params = {
				...requestParams,
				typeList: functionTypeList.map((item) => item.type).join()
			};

			getUnreadMessageNumber(params).then((res) => {
				const { code, data } = res || {};

				if (code !== 200) {
					return;
				}

				this.allUnreadParams = data || {};
			});
		},

		scrolltolower() {
			const {
				isHintStatus,
				requestParams: { pageIndex }
			} = this;

			if (isHintStatus) {
				return;
			}

			this.getMessageList(pageIndex + 1);
			this.isHintStatus = 'loading';
		},

		clickCallBack({ itemId }) {
			const { currentTypeList } = this;
			setSingleMessageHaveread({ id: itemId }).then((res) => {
				const { code } = res;

				if (code !== 200) {
					return;
				}

				const singleItem = currentTypeList.find((item) => item.id === itemId);

				this.getAllTypeUnreadNumber();
				this.$set(singleItem, 'status', 4);
			});
		},

		clickBack() {
			uni.navigateBack();
		}
	},

	components: {
		MessageBadge,
		MessageTemplate,
		DistributionNavBar
	}
};
</script>

<style lang="scss" scoped>
.MessageCenter {
	height: 100vh;
	display: flex;
	flex-direction: column;

	&-header {
		image {
			width: 40rpx;
			height: 40rpx;
			padding: 20rpx 0 20rpx 0;

			&.MessageCenter-header-read {
				width: 56rpx;
				height: 56rpx;
			}
		}

		&-title {
			color: #333;
			font-size: 32rpx;

			display: flex;
			align-items: center;
			justify-content: center;

			// #ifdef MP-WEIXIN
			padding-left: 100rpx;

			image {
				padding: 0;
				margin-left: 20rpx;
			}
			// #endif
		}

		&-main {
			height: 216rpx;
			background: #fff;

			padding: 18rpx 20rpx 0;

			&-type {
				display: flex;

				&-item {
					flex: 1;
					height: 116rpx;
					margin: 0 10rpx;
					padding: 14rpx 0 30rpx;

					display: flex;
					align-items: center;
					justify-content: center;

					color: #333;
					font-size: 28rpx;
					font-weight: 500;
					position: relative;

					background-repeat: no-repeat;
					background-size: cover;

					image {
						padding: 0;
						width: 72rpx;
						height: 72rpx;
					}

					&:first-child {
						margin-left: 0;
					}

					&:last-child {
						margin-right: 0;
					}

					&-number {
						position: absolute;
						top: -10rpx;
						right: -20rpx;
					}
				}
			}

			&-filter {
				margin-top: 24rpx;

				display: flex;
				align-items: center;

				button {
					margin: 0;
					padding: 0;
					border: none;
					height: 40rpx;
					line-height: 40rpx;
					background: transparent;

					color: #666;
					font-size: 28rpx;

					margin-right: 64rpx;

					&.active {
						color: #ff6b11;
						font-weight: 500;
					}

					&.mark {
						position: relative;
						padding-right: 24rpx;
						&::before {
							content: '';
							position: absolute;
							top: 50%;
							right: 0;
							width: 12rpx;
							height: 12rpx;
							background: #f55f4e;
							border-radius: 50%;
							transform: translateY(-50%);
						}
					}

					&:last-child {
						margin-right: 0;
					}

					&::after {
						border: none;
					}
				}
			}
		}
	}

	&-content {
		flex: 1;
		background: #fff;
	}
}
</style>
